<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>荏狸十三的DIY画板</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <canvas id="canvas" width="100" height="100"></canvas>
    <script>
      let canvas = document.getElementById("canvas");
      canvas.width = document.documentElement.clientWidth;
      canvas.height = document.documentElement.clientHeight;
      let ctx = canvas.getContext("2d");
      ctx.fillStyle = "blue";
      ctx.strokeStyle = "black";
      ctx.lineWidth = 10;
      ctx.lineCap = "round";

      function drawLine(X1, Y1, X2, Y2) {
        ctx.beginPath();
        ctx.moveTo(X1, Y1);
        ctx.lineTo(X2, Y2);
        ctx.stroke();
      }

      let painting = false;
      let last;

      var isTouchDevice = "ontouchstart" in document.documentElement;
      console.log(isTouchDevice);
      if (isTouchDevice) {
        canvas.ontouchstart = (e) => {
          let X = e.touches[0].clientX;
          let Y = e.touches[0].clientY;
          last = [X, Y];
        };
        canvas.ontouchmove = (e) => {
          let X = e.touches[0].clientX;
          let Y = e.touches[0].clientY;
          drawLine(last[0], last[1], X, Y);
          last = [X, Y];
        };
      } else {
        canvas.onmousedown = (e) => {
          painting = true;
          last = [e.clientX, e.clientY];
        };
        canvas.onmousemove = (e) => {
          if (painting === true) {
            drawLine(last[0], last[1], e.clientX, e.clientY);
            last = [e.clientX, e.clientY];
          }
        };
        canvas.onmouseup = () => {
          painting = false;
        };
      }
    </script>
  </body>
</html>
